<template>
  <CommonPage show-footer>
    <div class="pt-50">
      <div class="title">基本信息</div>

      <n-form
        ref="elForm"
        label-placement="left"
        label-width="100"
        :model="model"
        :rules="rules"
      >
        <div class="flex">
          <n-form-item label="姓名">
            <n-input placeholder="" disabled v-model:value="model.name" />
          </n-form-item>
          <n-form-item label="部门">
            <n-input placeholder="" disabled v-model:value="model.orgName" />
          </n-form-item>
          <n-form-item label="所属街道">
            <n-select
              readonly
              multiple
              placeholder=""
              label-field="name"
              value-field="code"
              :options="streets"
              :value="streetIds"
            />
          </n-form-item>
        </div>
        <div class="flex">
          <n-form-item label="邮箱" path="email">
            <n-input
              :placeholder="isEdit ? '请输入邮箱号' : ''"
              :disabled="!isEdit"
              v-model:value="model.email"
            />
          </n-form-item>
          <n-form-item label="手机" path="phone">
            <n-input
              :placeholder="isEdit ? '请输入手机号' : ''"
              :disabled="!isEdit"
              v-model:value="model.phone"
            />
          </n-form-item>
          <n-form-item label="账号">
            <n-input placeholder="" disabled v-model:value="model.account" />
          </n-form-item>
        </div>

        <div class="flex">
          <template v-if="isEdit">
            <div class="ml-20">
              <n-button
                style="width: 100px"
                type="error"
                secondary
                :loading="loading"
                @click="cancelEdit"
              >
                取消编辑
              </n-button>
            </div>

            <div class="ml-10">
              <n-button
                style="width: 100px"
                type="primary"
                :loading="loading"
                @click="saveEdit"
              >
                保存编辑
              </n-button>
            </div>
          </template>

          <div class="ml-20" v-else>
            <n-button type="primary" @click="startEdit">
              编辑基本信息
            </n-button>
          </div>

          <div class="ml-20">
            <n-button
              style="width: 100px"
              type="primary"
              secondary
              @click="resetPassword"
            >
              修改密码
            </n-button>
          </div>
        </div>
      </n-form>
    </div>
  </CommonPage>
</template>

<script setup>
import { ref, watch } from 'vue'
import mitt from '@/utils/mitt'
import api from './api'

import { useUserStore } from '@/store'
const { userInfo } = useUserStore()

const elForm = ref(null)
const defaultModel = ref({ ...userInfo })
const model = ref({ ...userInfo })
const isEdit = ref(false)
const loading = ref(false)

const rules = {
  email: {
    required: true,
    message: '请输入邮箱号',
  },
  phone: {
    required: true,
    message: '请输入手机号',
  },
}

const streets = ref([])
const streetIds = ref([])
getStreetList()

if (userInfo.streetList && userInfo.streetList.length) {
  streetIds.value = userInfo.streetList.map((v) => v.id)
}

// 修改密码
function resetPassword() {
  mitt.emit('resetPassword')
}

function startEdit() {
  defaultModel.value = { ...model.value }
  isEdit.value = true
}

function cancelEdit() {
  elForm.value.restoreValidation()
  model.value = { ...defaultModel.value }
  isEdit.value = false
}

function saveEdit() {
  elForm.value.validate(async (errors) => {
    if (!errors) {
      const params = {
        id: model.value.id,
        phone: model.value.phone,
        email: model.value.email,
      }

      loading.value = true
      const { code } = await api.updateUserInfo(params)
      loading.value = false

      if (code === 200) {
        $message.success('保存成功')
        isEdit.value = false
      }
    }
  })
}

async function getStreetList() {
  const { code, data } = await api.getStreetList()

  if (code === 200) {
    streets.value = data
  }
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  padding-top: 50px;
}

.title {
  position: absolute;
  top: 15px;
  left: 0;
  padding-left: 10px;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 0 4px 4px 0;
  }
}
</style>
